<template>
    <div>
      <la-dialog
        ref="dialogRef"
        :title="dialogTitle"
        :async="true"
        @confirm="handleSubmit"
        @cancel="handleClose"
        width="500px"
      >
        <el-form
          ref="formRef"
          :model="formData"
          label-width="84px"
          :rules="formRules"
        >
          
          <!-- <el-form-item label="字典标签" prop="label">
            <el-input v-model="formData.label" />
          </el-form-item>
          <el-form-item label="字典值" prop="value">
            <el-input  v-model="formData.value" />
          </el-form-item> -->
          <template v-for="(item,index) in columnList" :key="index">
            <el-form-item :label="item.name" prop="value" v-if="item.type =='input'">
            <el-input  v-model="formData.value[item.column]" />
          </el-form-item> 
          </template>  
          <el-form-item label="权重" prop="weigh">
            <el-input v-model="formData.weigh" />
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="formData.status">
              <el-radio label="normal">正常</el-radio>
              <el-radio label="disabled">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </la-dialog>
    </div>
  </template>
  <script setup>
  import api from "@/lnk/admin/api";
  import laDialog from "@/lnk/components/la-dialog/index.vue";
  import { reactive, ref, computed, nextTick } from "vue";
  import feedback from "@/lnk/utils/feedback";
  
  const emit = defineEmits(["success", "close"]);
  const dialogRef = ref(null);
  const formRef = ref(null);
  const mode = ref("add");
  const formData = ref({
    value:"",
    type_id:0,
    value:{},
    weigh: 100,
    status: "normal",
  });
  const formRules = reactive({
    // label:[
    // { required: true, message: "请输入字典标签", trigger: "blur" },
    // ],
    // value:[
    // { required: true, message: "请输入字典值", trigger: "blur" },
    // ]
  });
  
  const dictType = ref([]);
  const columnList = ref([]);
  
  const dialogTitle = computed(() => {
    return mode.value == "edit" ? "编辑字典数据" : "新增字典数据";
  });
  
  const getDictType = async () => {
    const res = await api.dictType.read();
    dictType.value = res.data;
  };
  

  
  const setFormData = async (row) => {
    const typeRes = await api.dictType.read({ id: row.type_id });
   
    formData.value.type_id = typeRes.data.id;
    formData.value.code = typeRes.data.code;
    columnList.value = typeRes.data.column_list
    if(row.id){
        const res = await api.dictData.read({ id: row.id });
        formData.value = res.data;
    }
  };
  
  const open = (type = "add") => {
    mode.value = type;
    dialogRef.value.open();
  };
  const close = () => {
    formRef.value.resetFields();
    dialogRef.value.close();
    // emit("close");
  };
  const handleSubmit = async () => {
    await formRef.value?.validate();
    let res;
    if (mode.value == "add") {
      res = await api.dictData.create(formData.value);
    } else {
      res = await api.dictData.update(formData.value);
    }
  
    if (!res.error) {
      close();
      emit("success");
      feedback.msgSuccess(res.msg);
    } else {
      feedback.msgError(res.msg);
    }
  };
  const handleClose = async () => {
    emit("close");
  };
  getDictType()
  defineExpose({
    open,
    setFormData,
  });
  </script>
  